<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>跑步中</title>
		<script src="https://webapi.amap.com/maps?v=2.0&key=c43940ecac707bf75c64997740c68c4f"></script>
	</head>
	<body class="running">
		<header class="header">
			<p>户外跑步</p>
			<h3>运动中</h3>
		</header>
		<!-- 运动公里 -->
		<div class="mileage">
			<span id="mileageNum">0.03</span>
			公里
		</div>
		<!-- GPS信号提示 -->
		<div class="gps">
			<p>GPS信号低,数据精准度低</p>
			<span class="iconfont icon-dingwei"></span>
		</div>
		<!-- 配速 千卡 用时数据 -->
		<div class="panel">
			<!-- 配速 -->
			<div>
				<span class="iconfont icon-sudu"></span>
				配速
				<p id="speed">12.47</p>
			</div>
			<!-- 用时 -->
			<div>
				<span class="iconfont icon-shijian"></span>
				用时
				<p id="time">00:00:23</p>
			</div>
			<!-- 配速 -->
			<div>
				<span class="iconfont icon-huo"></span>
				千卡
				<p id="calorie">1.86</p>
			</div>
		</div>
		<!-- 暂停 继续 结束按钮 -->
		<div class="btns">
			<!-- 继续 bofang-->
			<div id="play">
				<span class="iconfont icon-bofang"></span>
				继续
			</div>
			<!-- 暂停 -->
			<div id="pause">
				<span class="iconfont icon-24gf-pause2"></span>
				暂停
			</div>
			<!-- 结束 -->
			<div id="end">
				<span class="iconfont icon-jieshu"></span>
				结束
			</div>
		</div>
	</body>
</html>
